@charset 'uft-8';
@import './reset';

body {
    overflow: auto;
    height: 100vh;
}

.container {
    background-color: #efeff4;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 8vh;
    overflow: auto;
    width: 100vw;
    // position: absolute;
    z-index: 0;

    .item-con {
        width: 100%;

        .items {
            width: 95%;
            padding: 0 2vw;
            box-sizing: border-box;
            // height: 25vh;
            background-color: #FFF;
            margin: 10px auto;
            box-shadow: 1px 1px 2px rgba($color: #000000, $alpha: 0.3);
            border-radius: 1vw;

            .header {
                display: flex;
                height: 35%;
                padding: 2vw;
                box-sizing: border-box;
                border-bottom: 1px solid #efeff4;

                .avatar {
                    width: 8vw;
                    height: 8vw;
                    // background-color: lightcoral;
                    box-sizing: border-box;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        vertical-align: middle;
                        object-fit: cover;
                    }
                }

                .right {
                    flex: 1;
                    margin-left: 15px;
                    color: #8f8f94;
                }
            }

            .article,
            .image,
            .video {
                // height: 45%;
                font-size: 3vw;
                color: #8f8f94;
                padding: 2vw;
                box-sizing: border-box;
                border-bottom: 1px solid #efeff4;

                img {
                    width: 100%;
                    object-fit: cover;
                }
            }

            .video {
                position: relative;

                .video-layer {
                    position: absolute;
                    z-index: 2;
                    top: 2vw;
                    left: 2vw;
                    right: 2vw;
                    bottom: 2vw;
                    background-color: rgba($color: #000000, $alpha: 0.3);

                    .iconbofang {
                        font-size: 25vw;
                        color: #fff;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        z-index: 5;
                    }
                }
            }

            .operate {
                width: 100%;
                display: flex;
                height: 20%;
                box-sizing: border-box;
                padding: 1vw;

                .btn {
                    flex: 1;
                    text-align: center;
                    color: #007aff;
                    padding: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 2vw;
                }
            }
        }
    }

    .loading {
        width: 20vw;
        height: 7vh;
        // margin: 0 auto;
        position: absolute;
        bottom: 8vh;
        left: 50%;
        transform: translate(-50%, 0);
        // margin-top: 5vh;
        // margin-top: 100px;
        display: none;
    }

    .loading span {
        display: inline-block;
        width: 2vw;
        height: 100%;
        border-radius: 4px;
        background: lightgreen;
        animation: load 1s ease infinite;
    }

    @keyframes load {

        0%,
        100% {
            height: 7vh;
            background: lightgreen;
        }

        50% {
            height: 3vh;
            margin: -1vh 0;
            background: lightblue;
        }
    }

    .loading span:nth-child(2) {
        animation-delay: 0.2s;
    }

    .loading span:nth-child(3) {
        animation-delay: 0.4s;
    }

    .loading span:nth-child(4) {
        animation-delay: 0.6s;
    }

    .loading span:nth-child(5) {
        animation-delay: 0.8s;
    }
}

.showAlert {
    display: none;
    position: absolute;
    max-height: 80vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
    width: 100%;

    video {
        width: 100%;
        max-height: 85vh;
    }
}

.allLayer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.7);
    z-index: 11;
    display: none;

    #vedioClose {
        position: absolute;
        right: 5vw;
        top: 1vh;
        z-index: 20;
        background-color: rgba($color: #000000, $alpha: .7);
        border-radius: 50%;
        i {
            font-size: 10vw;
            color: #fff;
        }

    }
}

footer {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 8vh;
    line-height: 8vh;
    text-align: center;
    box-sizing: border-box;
    border-top: 0.3vh solid rgb(200, 197, 197);
    background-color: #eee;
    z-index: 10;

    .footer-item {
        flex: 1;
        cursor: pointer;
    }

    .text,
    .image {
        border-right: 0.3vh solid rgb(200, 197, 197);
    }
}